<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>礼品仓库</el-breadcrumb-item>
      <el-breadcrumb-item>申请列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-button type="primary" @click="getGiftList">申请礼品</el-button>
        </el-col>
        <el-col :span="16" style="text-align: center">
          <!-- 日期筛选 -->
          <el-date-picker
            v-model="querInfo.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-select
            v-model="querInfo.isme"
            placeholder="我的申请"
            style="width: 120px"
          >
            <el-option v-for="item in apply" :value="item"></el-option>
          </el-select>
          <el-select
            v-model="querInfo.status"
            placeholder="申请状态"
            style="width: 120px"
          >
            <el-option v-for="item in status" :value="item"></el-option>
          </el-select>
          <el-button icon="el-icon-search" @click="getBtn"></el-button>
        </el-col>
      </el-row>
      <el-table
        stripe
        show-summary
        :data="myapplielist"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        width="100%"
      >
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="申请时间" width="150">
          <template v-slot="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              new Date(scope.row.applyDate)
                .toLocaleString('chinese', { hour12: false })
                .substring(5)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="giftName"
          label="礼品名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="申请数量"
          width="100"
        ></el-table-column>
        <el-table-column label="申请状态" width="100">
          <template v-slot="scope">
            <span style="margin-left: 10px">{{
              status[scope.row.status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请备注" width="300">
          <template v-slot="scope">
            <span style="margin-left: 10px" v-for="item in scope.row.memo">{{
              item.username + ': ' + item.context
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="editshow">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="审核"
              placement="top-start"
              enterable
            >
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-s-claim"
                circle
                @click.stop
                @click="
                  ;(editapplieshow = true), (checkdata.id = scope.row._id)
                "
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 礼品申请对话框 -->
    <el-dialog
      title="选择礼品"
      :visible.sync="appliegiftDialogVisible"
      width="400px"
      style="text-align: center"
    >
      <el-form
        :model="applieForm"
        :rules="applierules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="选择礼品" prop="giftName">
          <el-select
            v-model="applieForm.giftName"
            placeholder="请选择"
            style="width: 180px"
          >
            <el-option v-for="item in giftname" :value="item._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择数量" prop="num">
          <el-input-number
            v-model="applieForm.num"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="申请备注" prop="memo">
          <el-input type="textarea" v-model="applieForm.memo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 审核对话框 -->
    <el-dialog
      title="你想要?"
      :visible.sync="editapplieshow"
      width="300px"
      style="text-align: center"
    >
      <el-input
        v-model="checkdata.memo"
        placeholder="备注"
        style="width: 200px"
      ></el-input>
      <el-button type="primary" @click="check(), (checkdata.check = false)"
        >不通过</el-button
      >
      <el-button type="primary" @click="check(), (checkdata.check = true)"
        >通过</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
export default {
  data() {
    return {
      editshow: false,
      // 筛选参数
      querInfo: {
        isme: '我的申请',
        status: '申请中',
        date: '',
      },
      // 申请列表
      myapplielist: [],
      // 申请礼品显示
      appliegiftDialogVisible: false,
      // 申请礼品名称
      giftname: [],
      applieForm: {},
      applierules: {
        giftName: [{ required: true, message: '请选择礼品', trigger: 'blur' }],
        num: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { min: 1, type: 'number', message: '输入有误', trigger: 'blur' },
        ],
        memo: [
          { required: true, message: '请输入留言', trigger: 'blur' },
          { min: 3, message: '最少3个字符', trigger: 'blur' },
        ],
      },
      // 申请状态
      status: ['申请中', '通过', '不通过'],
      //
      apply: ['我的申请', '下级申请'],
      editapplieshow: false,
      checkdata: {},
    }
  },
  created() {
    this.getapply()
  },
  methods: {
    // 获取申请列表
    async getapply() {
      const { data: res } = await this.$http.post(
        '/hx/myapplielist',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      this.editshow = false
      this.myapplielist = res.data
    },
    // 后台礼品列表
    async getGiftList() {
      const { data: res } = await this.$http.post('/hx/getgiftlist')
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: '后台没有礼品录入!',
          position: 'top-left',
        })
      }
      this.giftname = res.data
      this.appliegiftDialogVisible = true
    },
    // 申请礼品
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            '/hx/appliegift',
            this.applieForm
          )
          if (res.meta.status !== 200) {
            Notification.error({
              title: '提示',
              message: res.meta.msg,
              position: 'top-left',
            })
          }
          Notification.success({
            title: '提示',
            message: res.meta.msg,
            position: 'top-left',
          })
          this.myapplielist.push(res.data)
          this.appliegiftDialogVisible = false
        } else {
          return false
        }
      })
    },
    // 获取申请是自己还是下级
    getBtn() {
      if (this.querInfo.isme == '我的申请') {
        this.getapply()
      } else if (this.querInfo.isme == '下级申请') {
        this.applielist()
      }
    },
    // 获取下级申请列表
    async applielist() {
      const { data: res } = await this.$http.post(
        '/hx/applielist',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      this.editshow = true
      this.myapplielist = res.data
    },
    // 审核礼品
    async check() {
      const { data: res } = await this.$http.post(
        '/hx/checkapplie',
        this.checkdata
      )
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      Notification.success({
        title: '提示',
        message: res.meta.msg,
        position: 'top-left',
      })
      this.myapplielist.forEach((item, index) => {
        if (item._id == this.checkdata.id) {
          this.myapplielist.splice(index, 1)
        }
      })
      this.editapplieshow = false
    },
  },
}
</script>

<style lang="less">
</style>